const otxt = document.getElementById("txt")
const olist = document.getElementById("list")

const url = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su"
otxt.oninput=function(){
console.log(this.value)
if(this.value ===""){
    olist.innerHTML = ""
    return
}
const str = `wd=${this.value}&cb=fan`
const script = document.createElement("script")
script.src=url+"?" +str
document.body.appendChild(script)
window.fan=function(res){
    let str = ""
    for(let i=0;i<res.s.length;i++){
        str += `<a href="#"><li id="li">${res.s[i]}</li></a>`
    }
    olist.innerHTML=str

// =========================
var keyIndex;
        var flag = 0
        var index = 0;
        otxt.onclick = function (eve) {
            var e = eve || window.event;
            stopBubble(e);
            if (flag === 0) {
                olist.style.display = "block";
                flag = 1;
            } else {
                olist.style.display = "none";
                flag = 0;
            }
        }
        
        let oli = document.querySelectorAll("#list li")
        console.log(oli)
        for (let i = 0; i < oli.length; i++) {
            console.log(oli[i])
            oli[i].a = i
            oli[i].onclick = function () {
                console.log(oli[i])
                otxt.value = oli[i].innerHTML
                // console.log(oli[i].innerHTML)
                olist.style.display = "block";
                flag = 0
            }
            oli[i].onmouseenter = function () {
                if (keyIndex !== undefined) {
                    oli[keyIndex].className = "";
                }
                keyIndex = this.a;
                this.className = "bg";
            }
            oli[i].onmouseout = function () {
                this.className = "";
            }
        }
        olist.onmouseout = function () {
            if (keyIndex !== undefined) {
                oli[keyIndex].className = "";
            }
            keyIndex = undefined;
        }
        document.onclick = function () {
            olist.style.display = "none";
            flag = 0;
        }
        // document.onkeydown = function (eve) {
        //     var e = eve || window.event;
        //     var code = e.keyCode || e.which;
        //     if (code === 38) {
        //         if (keyIndex === undefined) {
        //             keyIndex = oli.length; 
        //         }
        //         if (keyIndex === 0) {
        //             keyIndex = 0;
        //         } else {
        //             keyIndex--;
        //         }
        //         if (keyIndex != oli.length - 1) { 
        //             oli[keyIndex + 1].className = ""; 
        //         }
        //         oli[keyIndex].className = "bg";
        //         search_Ipt.value  = oli[keyIndex].innerHTML;
        //     }
        //     if (code === 40) {
        //         if (keyIndex === undefined) {
        //             keyIndex = -1; 
        //         }
        //         if (keyIndex === oli.length - 1) {
        //             keyIndex = oli.length - 1;
        //         } else {
        //             keyIndex++;
        //         }
        //         if (keyIndex != 0) { 
        //             oli[keyIndex - 1].className = "";
        //         }
        //         oli[keyIndex].className = "bg";
        //         search_Ipt.value  = oli[keyIndex].innerHTML;
        //     }
        //     if (code === 13) { 
        //         search_Ipt.value  = oli[keyIndex].innerHTML;
        //         if (flag === 0) {
        //             search_L.style.display = "block";
        //             if (keyIndex !== undefined) {
        //                 oli[keyIndex].className = "";
        //             }
        //             keyIndex = undefined; 
        //             flag = 1;
        //         } else {
        //             search_L.style.display = "none";
        //             flag = 0;
        //         }
        //         search_L.style.display = "none";
        //         index = keyIndex;
        //     }
        // }
        }
        
        function stopBubble(e){
            if(e.stopPropagation){
                e.stopPropagation()
            }else{
                e.cancelBubble = true;
            }
        }
    }